<template>
  <div class="main">
    <div class="on">
      <div class="content">
        <div class="action">
          <span>中 转 服 务 器 设 置</span>
          <div class="click">
            <input type="checkbox" id="myCheckbox" v-model="isChecked" />
            <label for="mycheck"> 开机启动</label>
          </div>
        </div>
        <div class="upleft">
          <div class="zhuce">
            <button
              class="iconfont icon-yonghuzhuce"
              @click="FirstSignIn"
            ></button>
            <label>注 册</label>
          </div>
          <div class="exit">
            <button class="iconfont icon-tuichu">退 出 程 序</button>
          </div>
        </div>
      </div>

      
    </div>
    <div class="bottom">
      <div class="content">
        <div class="eight">
          <button
            v-for="(item, index) in buttons"
            :key="index"
            class="iconfont"
            :class="[item.icon, { isPointed: currentPoint === index }]"
            @click="change(item, index)"
          >
            <div class="buttonName">{{ item.name }}</div>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
const currentPoint = ref();
const router = useRouter();
const change = (item, index) => {
  currentPoint.value = index;
  const path = item.path;
  console.log(index, "对啦对啦");
  router.push(path);
};
const isChecked = ref(false);
const FirstSignIn = () => {
  router.push("/FirstSignIn");
};
const buttons = ref([
  {
    icon: "icon-dingshi-",
    name: "时间系统设置",
    path: "/System_Time",
  },
  {
    icon: "icon-jianpan",
    name: "快捷键设定",
    path: "/Keyboard_Setting",
  },
  {
    icon: "icon-_consult",
    name: "监听设置",
    path: "/Monistor_Setting",
  },
  {
    icon: "icon-zhuce",
    name: "注册SDK",
    path: "/SignIn",
  },
  {
    icon: "icon-dingshiyunwei",
    name: "设备时间设置",
    path: "Device_Time",
  },
  {
    icon: "icon-shishihuamian",
    name: "定时开关机",
    path: "/ON_OFF",
  },
  {
    icon: "icon-bangzhu",
    name: "帮助",
  },
  {
    icon: "icon-xitonganquan",
    name: "系统安全设置",
    path:'/System_safety'
  },
]);
</script>
<style lang="less" scoped>
@import url("./general_setting.less");
@import url("./shezhiicon/iconfont.css");
</style>